<template>
  <div class="department">
    <PageSearch
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></PageSearch>
    <PageContent
      :content-config="contentConfig"
      @edit-click="handleEditClick"
      @new-click="handleNewClick"
      ref="contentRef"
    >
      <!-- 自定义列
      <template #leader="scoped">
        <span class="leader">{{ scoped.row[scoped.prop] }}</span></template
      >
      <template #parent="scoped"
        ><span class="parent">{{ scoped.row[scoped.prop] }}</span></template
      > -->
    </PageContent>
    <PageModal :model-config="modalConfigRef" ref="modelRef"></PageModal>
  </div>
</template>

<script setup lang="ts" name="department">
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModal from '@/components/page-modal/page-modal.vue'

import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import { computed } from 'vue'
import useMainStore from '@/store/main/main'
import usePageCountent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'

// modalconfig的操作 添加数据 options
const modalConfigRef = computed(() => {
  const mainStore = useMainStore()
  // map 映射一个新的对象  返回一个新的
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id }
  })
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options.push(...departments)
    }
  })
  return modalConfig
})
const { contentRef, handleQueryClick, handleResetClick } = usePageCountent()
const { modelRef, handleNewClick, handleEditClick } = usePageModal()
</script>

<style scoped>
.leader {
  color: blue;
}
.parent {
  color: rgb(128, 126, 0);
}
</style>
